<!DOCTYPE HTML>
<html>
<head>
    {include file="../../common/view/head"/}
</head>
<body>
<div id="main-container" class="container">
    <div class="register">
        <div class="register-header">

        </div>
        <div class="register-body clearfix">
            {if !empty($regSwitch)}

            <div class="register-type-tab">
                <ul id="regNav">
                    {if check_reg_type('username')}
                    <li class="{if $regSwitch[0] == 'username'}active{/if}">
                        <a href="#username_reg" data-toggle="tab">用户名</a>
                    </li>
                    {/if}
                    {if check_reg_type('email')}
                    <li class="{if $regSwitch[0] == 'email'}active{/if}">
                        <a href="#email_reg" data-toggle="tab">邮箱</a>
                    </li>
                    {/if}
                    {if check_reg_type('mobile')}
                    <li class="{if $regSwitch[0] == 'mobile'}active{/if}">
                        <a href="#mobile_reg" data-toggle="tab">手机</a>
                    </li>
                    {/if}
                </ul>
            </div>
            <div class="register-form-section">
                <form action="" method="post">
                    <div class="tab-content">
                        {volist name="regSwitch" id="vo"}
                            {switch name="vo"}
                                {case value="username"}
                                <!--用户名注册-->
                                <div class="tab-pane {if $key == 0}active in{/if}" id="username_reg">
                                    <div class="form-group clearfix">
                                        <input type="text" id="username" class="form-control form_check new-input" check-type="Username" check-url="{:url('ucenter/common/checkAccount')}" placeholder="请输入用户名"  value="" name="account">
                                    </div>
                                </div>
                                <!--用户名注册end-->
                                {/case}
                                {case value="email"}
                                <!--邮箱注册-->
                                <div class="tab-pane {if $key == 0}active in{/if}" id="email_reg">
                                    <div class="form-group clearfix">
                                        <input  type="text" id="email" class="form-control form_check new-input" check-type="UserEmail" check-url="{:url('ucenter/common/checkAccount')}" placeholder="请输入邮箱地址" name="account" {if $key != 0}disabled{/if}>
                                    </div>
                                    <div class="form-group row clearfix">
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control new-input pull-left" placeholder="请输入邮箱验证码" name="verify" {if $key != 0}disabled{/if}>
                                        </div>
                                        <div class="col-xs-4">
                                            <button type="button"  class="btn btn-block get-verify" data-role="getVerify"  data-type="email" data-url="{:url('api/verify/send')}" {if $key != 0}disabled{/if}>
                                                获取验证码
                                            </button>
                                        </div> 
                                    </div>
                                </div>
                                <!--邮箱注册end-->
                                {/case}
                                {case value="mobile"}
                                <!--手机注册-->
                                <div class="tab-pane {if $key == 0}active in{/if}" id="mobile_reg">
                                    <div class="form-group clearfix">
                                        <input type="text" id="mobile" class="form-control form_check new-input" check-type="UserMobile" check-url="{:url('ucenter/common/checkAccount')}" placeholder="请输入手机号" name="account" {if $key != 0}disabled{/if}>
                                    </div>
                                    <div class="form-group row clearfix">
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control new-input pull-left" placeholder="请输入手机验证码" name="verify" {if $key != 0}disabled{/if}>
                                        </div>
                                        <div class="col-xs-4">
                                            <button type="button" class="btn btn-block get-verify" data-role="getVerify" data-type="mobile" data-url="{:url('api/verify/send')}" {if $key != 0}disabled{/if}>
                                                获取验证码
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!--手机注册end-->
                                {/case}
                            {/switch}
                        {/volist}
                        {eq name="nicknameSwitch" value='1'}
                        <div class="form-group clearfix">
                            <input type="text" id="nickname" class="form-control form_check new-input" check-type="Nickname"  check-url="{:url('ucenter/common/checkNickname')}" placeholder="请输入昵称" name="nickname">
                        </div>
                        {/eq}
                        <div class="form-group clearfix">
                            <div class="password-block input-group">
                                <input type="password" id="inputPassword" class="form-control new-input" check-length="6,30"  placeholder="请输入密码"  name="password">
                                <!-- <span class="input-group-addon">
                                    <a href="javascript:void(0);" id="change_show"><i class="icon icon-eye-open"></i></a>
                                </span> -->
                                <span  class="see iconfont input-group-addon" data-type="hidden">&#xe67a;</span>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="password-block input-group">
                                <input type="password" class="form-control new-input" check-length="6,30"  placeholder="再次输入密码" name="confirm_password">
                                <!-- <span class="input-group-addon">
                                    <a href="javascript:void(0);" id="change_show"><i class="icon icon-eye-open"></i></a>
                                </span> -->
                                <span  class="see iconfont input-group-addon" data-type="hidden">&#xe67a;</span>
                            </div>
                        </div>
                        {if condition="check_verify_open('reg')"}
                        <div class="form-group row clearfix">
                            <div class="col-xs-8">
                                <input type="text" id="verifyCode" class="form-control new-input" placeholder="验证码" nullmsg="请填写验证码" datatype="*5-5" name="captcha">
                            </div>
                            <div class="col-xs-4 lg_lf_fm_verify">
                                <img class="verifyimg reloadverify img-responsive" alt="点击切换" src="{:captcha_src()}" style="cursor:pointer; height:45px">
                            </div>
                            <div class="col-xs-12 Validform_checktip text-warning lg_lf_fm_tip"></div>
                        </div>
                        {/if}
                        <div class="form-group row clearfix service-agreement">
                            <div class="col-xs-12">
                                <div class="checkbox-primary register-agreement">
                                    <input type="checkbox" id="registerAgreement" name="agreement" value="1">
                                    <label for="registerAgreement">我已阅读并同意<a href="{:url('agreement')}" target="_blank">《{:config('system.WEB_SITE_NAME')} 用户服务协议》</a></label>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="channel" value="pc" />
                        <button type="button" data-type="submit" class="btn btn-submit btn-block btn-lg">注册</button>
                        <div class="existing-account">
                            已有账号？ <a href="{:url('ucenter/common/login')}" title="">立即登录</a>
                        </div>
                    </div>
                </form>
            </div>
            {else}
            <div class="register-close-section">
                用户注册关闭，请稍后访问！
            </div>

            {/if}
        </div>
        <div class="record">

        </div>
    </div>
</div>
{include file="../../common/view/js"/}
{block name="script"}
<script type="text/javascript">
    $(function(){
        // 提交表单
        $('button[data-type="submit"]').click(function(){
            toast.showLoading();
            var self = $("form");
            $.post(self.attr("action"), self.serialize(), success, "json");
            return false;
            function success(data) {
                if (data.code) {
                    toast.success(data.msg + '页面即将跳转！', '温馨提示');
                    setTimeout(function () {
                        window.location.href = data.url
                    }, 1500);
                } else {
                    toast.error(data.msg, '温馨提示');
                    //刷新验证码
                    $(".reloadverify").click();
                }
                toast.hideLoading();
            }
        });
    });

    $(".form-group").on("click", ".see", function () {
    let type = $(this).data('type');
    if(type == 'hidden'){
        $(this).data('type','show');
        $(this).html('&#xe6b1;');
        $(this).prev().attr("type", "text");
    }else{
        $(this).data('type','hidden');
        $(this).html('&#xe67a;');
        $(this).prev().attr("type", "password");
    }
 });  

    $(function () {
        // 图形验证码
        var verifyimg = $(".verifyimg").attr("src");
        $(".reloadverify").click(function () {
            if (verifyimg.indexOf('?') > 0) {
                $(".verifyimg").attr("src", verifyimg + '&random=' + Math.random());
            } else {
                $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/, '') + '?' + Math.random());
            }
        });
    });

    $(function () {
        // 获取验证码
        $("[data-role='getVerify']").click(function () {
            var $this = $(this);
            var url = $this.data('url');
            toast.showLoading();
            var account = $this.parents('.tab-pane').find('[name="account"]').val();
            var type = $this.data('type');
            
            $.post(url, {
                account: account, 
                type: type, 
            }, function (res) {
                toast.hideLoading();
                if (res.code == 200) {
                    DecTime.obj = $this
                    DecTime.time = "{:config('extend.SMS_RESEND')}";
                    $this.attr('disabled',true)
                    DecTime.dec_time();
                    toast.success(res.msg);
                }else{
                    toast.error(res.msg);
                }
                
            })
        })
    })

    // 切换注册方式
    $(function(){
        $('#regNav li a').click(function(){
            $('.tab-pane').find('input').attr('disabled',true);
            $('.tab-pane').eq($("#regNav li a").index(this)).find('input').attr('disabled',false);
            $('.tab-pane').eq($("#regNav li a").index(this)).find('button').attr('disabled',false);
        })
    })
    $(function(){
        
    })

    var DecTime = {
        obj : 0,
        time : 0,
        dec_time : function(){
            if(this.time > 0){
                this.time = this.time - 1
                this.obj.text('重新获取' + this.time + 'S')
                setTimeout("DecTime.dec_time()",1000)
            }else{
                this.obj.text("获取验证码")
                this.obj.attr('disabled',false)
            }
        }
    }
</script>
{/block}   
</body>
</html>